<template>
    <div ref="chart" style="height:100%;"></div>
</template>
<script setup>
    import * as echarts from 'echarts';
    import 'echarts-wordcloud';
    import { onMounted, ref } from 'vue';
    let myChart = null;
    const chart = ref();
    onMounted(()=>{
        myChart = echarts.init(chart.value);
        const option = {
            series: [{
              type: 'wordCloud',
              shape: 'circle',
              // 其他形状你可以使用形状路径
              // shape: 'circle', // 示例
              // 或者自定义路径
              gridSize: 6,
              sizeRange: [12, 60],
              rotationRange: [0, 0],
              rotationStep: 45,
              drawOutOfBound:false,
              // 字体
              textStyle: {
                normal: {
                    padding: [8, 10, 5, 10],
                    borderColor:'#0ff',
                    borderWidth:1,
                    backgroundColor:'rgba(0,255,0,.6)',
                    color:'#0ff'
                    // color: function () {
                    //   return 'rgb(' + [
                    //     Math.round(Math.random() * 160),
                    //     Math.round(Math.random() * 160),
                    //     Math.round(Math.random() * 160)
                    //   ].join(',') + ')';
                    // }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              // 设置词云数据
              data: [
                { name:'vue', value:100 }, { name:'react', value:50 }, { name:'echarts', value:10 },
                { name:'hello', value:20 }, { name:'world', value:50 }, { name:'tttt', value:10 },
                { name:'3333', value:30 }, { name:'22', value:50 }, { name:'webpack', value:10 },

                ]
            }]
        }
        myChart.setOption(option);
    })

</script>